<template>
  <div class="card-container">
    <Row :gutter="40">
      <Col :span="18">
        <Form
          :model="queryWeatherParams"
          ref="queryWeatherForm"
          :inline="true"
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 20 }"
        >
          <Row :gutter="20">
            <Col :span="8">
              <FormItem label="预警类型" name="signalType">
                <Select
                  v-model:value="queryWeatherParams.signalType"
                  allowClear
                  placeholder="请选择预警类型"
                  :options="signalOptions"
                >
                </Select>
              </FormItem>
            </Col>

            <Col :span="8">
              <FormItem label="预警等级" name="signalLevel">
                <Select
                  v-model:value="queryWeatherParams.signalLevel"
                  allowClear
                  placeholder="请选择预警等级"
                  :options="levelOptions"
                >
                </Select>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="时间" name="time">
                <RangePickerCom
                  v-model:timeValue="queryWeatherParams.time"
                ></RangePickerCom>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="省" name="province">
                <Input
                  v-model:value="queryWeatherParams.province"
                  placeholder="请输入省"
                  allowClear
                />
                <!-- @keyup.enter.native="handleQuery" -->
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="市" name="city">
                <Input
                  v-model:value="queryWeatherParams.city"
                  placeholder="请输入市"
                  allowClear
                />
                <!-- @keyup.enter.native="handleQuery" -->
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Col>
      <Col :span="6">
        <Flex justify="end">
          <Space>
            <b-button icon="refresh" size="small" @click="resetWeatherQuery">
              重置</b-button
            >
            <b-button
              icon="search"
              size="small"
              @click="handleWeatherQuery(true)"
              >平台记录
            </b-button>
            <b-button icon="search" size="small" @click="handleWeatherTogether"
              >设备记录
            </b-button>
          </Space>
        </Flex>
      </Col>
    </Row>
  </div>
  <div
    class="card-container max-h-full overflow-y-auto"
    v-if="weatherList.length > 0"
  >
    <div
      class="weather-container"
      v-for="(item, index) in weatherList"
      :key="index"
    >
      <div class="collapse-top">
        <div class="left flex">
          <span class="font-bold">事件ID:</span>
          <span class="font-bold">{{ item.uuId }}</span>
          <span
            v-if="item.signalType"
            :class="['weather-tag', formatLevelColor(item.signalType)]"
            >{{ item.signalType }}</span
          >
          <span
            v-if="item.signalLevel"
            :class="['weather-tag', formatLevelColor(item.signalLevel)]"
            >{{ item.signalLevel }}</span
          >
          <SvgIcon
            :name="item.isResponse == '已响应' ? 'responded' : 'unresponse'"
            class="w-[112px] h-[30px] mr-1"
            :color="item.isResponse == '已响应' ? '#6AD7CA' : '#FF5368'"
            :strokeColor="item.isResponse == '已响应' ? '#6AD7CA' : '#FF5368'"
          />
        </div>
        <div class="right">
          <span @click="handleWeatherRespon(item)">响应</span>
        </div>
      </div>
      <div class="weather-content">
        <p class="weather-title">{{ item.head }}</p>
        <p>
          <span>预警时间：</span><span>{{ item.issueTime }}</span>
        </p>
        <p>
          <span>解除时间：</span><span>{{ item.relieveTime }}</span>
        </p>
        <p>{{ item.issueContent }}</p>
        <div class="flex items-center mt-[15px]">
          <SvgIcon name="gps" class="w-[14px] h-[14px] mr-1" />
          <span>{{ item.address }}</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <Pagination
    v-if="weatherTotal > 0"
    :total="weatherTotal"
    v-model:current="queryWeatherParams.pageNum"
    v-model:pageSize="queryWeatherParams.pageSize"
    :changeApi="getWeatherList"
  ></Pagination>
  <!-- 查看报文弹窗 -->
  <ReportModal
    v-if="reportVisible"
    v-model:report-visible="reportVisible"
    :titles="titles"
    :message-data="messageData"
  ></ReportModal>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import {
  Button,
  Col,
  Flex,
  Form,
  FormItem,
  Input,
  Modal,
  Row,
  Select,
  Space,
} from 'ant-design-vue';
import Pagination from '@/components/Pagination/Index.vue';
import SvgIcon from '@/components/SvgIcons/Index.vue';
import {
  getDeviceWeatherMessageList,
  getWeatherWarningList,
} from '@/api/device';
import RangePickerCom from './RangePickerCom.vue';
import ReportModal from './ReportModal.vue';

interface Props {
  pageData: any;
}
const props = defineProps<Props>();

const formatLevelColor = (val: string) => {
  switch (val) {
    case '红色':
      return 'red';
    case '橙色':
      return 'orange';
    case '黄色':
      return 'yellow';
    case '蓝色':
      return 'blue';
    // case 'blue':
    // 	return '演练预警';
    default:
      return '';
  }
};

const queryWeatherParams = ref({
  pageNum: 1,
  pageSize: 10,
  code: null,
  province: null,
  city: null,
  signalType: null,
  signalLevel: null,
  time: null,
  startTime: null,
  endTime: null,
  msgIds: null,
});

const signalOptions = ref(
  [
    '台风',
    '暴雨',
    '暴雪',
    '寒潮',
    '大风',
    '沙尘暴',
    '高温',
    '干旱',
    '雷电',
    '冰雹',
    '霜冻',
    '大雾',
    '霾',
    '道路结冰',
  ].map((item) => {
    return {
      value: item,
      label: item,
    };
  }),
);

const levelOptions = ref(
  ['蓝色', '黄色', '橙色', '红色'].map((item) => {
    return {
      value: item,
      label: item,
    };
  }),
);

const queryWeatherForm = ref();
const resetWeatherQuery = () => {
  queryWeatherParams.value.startTime = null;
  queryWeatherParams.value.endTime = null;
  console.log(queryWeatherForm.value);

  queryWeatherForm.value.resetFields();
  handleWeatherQuery(true);
};
const handleWeatherQuery = (item: any) => {
  if (item) {
    queryWeatherParams.value.msgIds = null;
  }
  if (queryWeatherParams.value.time) {
    queryWeatherParams.value.startTime = queryWeatherParams.value.time[0];
    queryWeatherParams.value.endTime = queryWeatherParams.value.time[1];
  } else {
    queryWeatherParams.value.startTime = null;
    queryWeatherParams.value.endTime = null;
  }
  queryWeatherParams.value.pageNum = 1;
  getWeatherList();
};

const weatherList = ref([]);
const weatherTotal = ref(0);
const getWeatherList = async () => {
  queryWeatherParams.value.code = props.pageData.code;
  queryWeatherParams.value = Object.fromEntries(
    Object.entries(queryWeatherParams.value).filter(([_, v]) => v !== null),
  );
  const res: any = await getWeatherWarningList(queryWeatherParams.value);
  if (res.code == 200) {
    weatherList.value = res.rows;
    weatherTotal.value = res.total;
  }
};
getWeatherList();

/**
 * 当前记录
 */
const handleWeatherTogether = async () => {
  const res = await getDeviceWeatherMessageList({
    code: props.pageData.code,
  });
  if (res.code == 200) {
    if (res.msg == '') {
      weatherList.value = [];
      weatherTotal.value = 0;
      return;
    }
    queryWeatherParams.value.msgIds = res.msg as any;
    handleWeatherQuery(false);
  }
};

/**
 * 响应报文
 */
const titles = ref('');
const messageData = ref({});
const reportVisible = ref(false);
const handleWeatherRespon = (record: any) => {
  titles.value = '报文';
  messageData.value = JSON.parse(record.responseMessage);
  reportVisible.value = true;
};
</script>

<style lang="scss" scoped>
$Color-II: #0194ff;
$Color-III: #ffe02c;
$Color-IV: #ffa318;
$Color-V: #ff4d4f;

$bgColor-II: rgba(1, 148, 255, 0.08);
$bgColor-III: rgba(255, 224, 44, 0.1);
$bgColor-IV: rgba(255, 163, 24, 0.08);
$bgColor-V: rgba(255, 77, 79, 0.08);

.red {
  border-color: $Color-V !important;
  color: $Color-V !important;
  background: $bgColor-V !important;
}

.orange {
  border-color: $Color-IV !important;
  color: $Color-IV !important;
  background: $bgColor-IV !important;
}

.yellow {
  border-color: $Color-III !important;
  color: $Color-III !important;
  background: $bgColor-III !important;
}

.blue {
  border-color: $Color-II !important;
  color: $Color-II !important;
  background: $bgColor-II !important;
}

.gps-icon {
  margin-right: 5px;
  font-size: 10px;
  vertical-align: middle;
}

.warn-icon {
  // width: 4em;
  height: 30px;
  font-size: 75px;
  vertical-align: middle;
}

.weather-tag {
  margin-left: 20px;
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--text-color);
  color: var(--custom-sever-info);
  background-color: transparent;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
}

.weather-container {
  padding: 20px 0 !important;
  border-bottom: 1px dashed var(-custom-collapse-content);
}

.weather-content {
  padding-right: 40px;
}

.weather-title {
  font-size: 16px;
}

.collapse-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    // display: flex;
    // align-items: center;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;

    & > span:nth-child(2) {
      margin-right: 20px;
    }
  }

  .right {
    color: var(--custom-sever-info);
    cursor: pointer;

    > span {
      margin: 0 10px;
    }

    > span:hover {
      color: rgba(106, 215, 202, 1);
    }
  }
}

p {
  padding-top: 15px;
  color: var(--custom-sever-info) !important;
  font-size: 14px;
  word-break: break-all;
}

.pagination-box {
  margin-top: auto;
}
</style>
